<template>
  <view class="user-info-card">
    <!-- 顶部信息 -->
    <view class="top-section">
      <view class="user-basic">
        <image class="avatar" :src="userInfo?.avatar" mode="aspectFill" />
        <view class="info">
          <text class="name">{{ userInfo?.username || "未登录" }}</text>
          <view class="member-tag" @tap="handleMemberClick">
            <image class="plus-icon" :src="commonStore.baseImageUrl + 'test-yujia/mine/small-logo.png'">
            </image>
            <text v-if="userInfo&& userInfo.hasVip">{{ userInfo.hasVip ? 'Plus会员' : '普通会员' }}</text>
            <text v-else>未开通会员</text>
            <image class="arrow-icon" :src="commonStore.baseImageUrl + 'test-yujia/mine/arrow-right.png'
              "></image>
          </view>
        </view>
      </view>
      <view class="user-settings">
        <image class="settings-icon" v-if="true" @tap="navToSettings"
          :src="commonStore.baseImageUrl + 'test-yujia/mine/saoma-icon.png'" />

        <view class="saoma" v-else>
          <image class="saoma-icon" :src="commonStore.baseImageUrl + 'test-yujia/mine/saoma-icon.png'">
          </image>
          <text>扫码</text>
        </view>
      </view>
    </view>

    <!-- 统计数据 -->
    <view class="statistics">
      <view class="stat-item">
        <text class="label">会员在线(天)</text>
        <text class="value">{{ statistics?.onlineCount || "-" }}</text>
      </view>
      <view class="stat-item">
        <text class="label">累计上课(节)</text>
        <text class="value">{{ userInfo?.allClassCount || "0" }}</text>
      </view>
      <view class="stat-item">
        <text class="label">本月上课(节)</text>
        <text class="value">{{ userInfo?.monthClassCount || "0" }}</text>
      </view>
      <view class="stat-item">
        <text class="label">已约课(节)</text>
        <text class="value">{{ userInfo?.reserveCount || "0" }}</text>
      </view>
    </view>

    <!-- 会员卡片 -->
    <VipBenefits :containerStyle="{ background: '#8FB433' }" />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import VipBenefits from "@/pages/index/components/vip-benefits.vue";
import { useCommonStore, useUserStore } from "@/store";
import { getMyStatisticsAPI } from "@/apis/user";
import { onShow } from "@dcloudio/uni-app";

const commonStore = useCommonStore();
const userStore = useUserStore();
const { userInfo } = userStore
const statistics = ref({})


const handleMemberClick = () => {
  uni.navigateTo({ url: "/pages/subpackages/memberCenter/index" });
};

const navToSettings = () => {
  uni.navigateTo({ url: "/pages/settings/index" });
};

const handleVipClick = () => {
  uni.navigateTo({ url: "/pages/vip/index" });
};

const handleBenefitsClick = () => {
  uni.navigateTo({ url: "/pages/benefits/index" });
};

const getMyStatistics = async () => {
  const { code, data } = await getMyStatisticsAPI({
    userId: userInfo.id
  });
  if (code === '200') {
    console.log(data);
    statistics.value = data
  }
};

onShow(() => {
  if (userStore.token) {
    getMyStatistics();
  } else {
    // 未登录状态

  }
});
</script>

<style lang="scss">
.user-info-card {
  background: #7da220;
  padding: 30rpx 12rpx;
  color: #fff;
  border-radius: 16rpx;
  position: relative;

  .top-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    margin-top: -50rpx;

    .user-basic {
      display: flex;
      align-items: flex-end;
      gap: 20rpx;

      .avatar {
        width: 116rpx;
        height: 116rpx;
        border-radius: 50%;
        border: 4rpx solid rgba(255, 255, 255, 0.3);
        background-color: #fff;
      }

      .info {
        .name {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
          display: block;
        }

        .member-tag {
          display: flex;
          align-items: center;
          background: #6a891e;
          padding: 4rpx 16rpx;
          border-radius: 24rpx;
          font-size: 16rpx;

          .plus-icon {
            width: 22rpx;
            height: 27rpx;
            margin-right: 8rpx;
          }

          .arrow-icon {
            margin-left: 8rpx;
            width: 19rpx;
            height: 19rpx;
          }
        }
      }
    }

    .user-settings {
      margin-right: 20rpx;

      .settings-icon {
        width: 40rpx;
        height: 40rpx;
        background: #eee;
      }

      .saoma {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        font-size: 22rpx;

        .saoma-icon {
          width: 40rpx;
          height: 40rpx;
          background: #eee;
        }
      }
    }
  }

  .statistics {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;


    .stat-item {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      &::after {
        content: " ";
        display: block;
        width: 2rpx;
        height: 100%;
        background: rgba(#EBEBE8, 0.3);
        position: absolute;
        border-radius: 2rpx;
        right: -30rpx;
      }

      .value {
        font-size: 30rpx;
        font-weight: bold;
        display: block;
        margin-top: 16rpx;
      }

      .label {
        font-size: 22rpx;
        opacity: 0.8;
      }
    }
  }

  .vip-cards {
    display: flex;
    gap: 20rpx;

    .card {
      flex: 1;
      background: rgba(255, 255, 255, 0.1);
      padding: 20rpx;
      border-radius: 12rpx;
      text-align: center;

      text {
        display: block;
        font-size: 26rpx;
      }

      .sub-text {
        font-size: 22rpx;
        opacity: 0.8;
        margin-top: 8rpx;
      }
    }
  }
}
</style>